<template>
	<view class="all">
		<!-- 请假记录 -->
		<view  style="height: 20rpx;background-color: #F2F2F2;"></view>
		<view style="display: flex; margin-left: 60%;" @click="navigateTo('/pages/Leave/LeaveList')">
			<view style="margin-top: 5rpx;"><text style="font-weight: bold; color: #ABC270;width: 500rpx;">Leave Records</text></view>
			<view style="margin-left: 10rpx;"><u-icon size="28px" color="#ABC270" name="list-dot"></u-icon></view>
		</view>
		<!-- 请假种类 -->
		<view style="margin-left: 40rpx;font-weight: 500;color: #888888;font-size:small;margin-top: 10rpx;">
			Leave Type
		</view>
		<view  style="height: 10rpx;background-color: #F2F2F2;"></view>
		<view class="center">
			<!-- <u-action-sheet :list="list" v-model="show" :cancel-btn="true" cancelText="Cancel" @click="click"></u-action-sheet> -->
			<button style="width: 700rpx; height: 70rpx;border: #f2f2f2 solid 1px; margin-top: 10rpx; background-color: #FFFFFF;color: rgb(96,98,102); font-size: small; " plain="true" @click="show = true">
				<view>{{typeLeave}}</view>
			</button>
			<u-select v-model="show" :list="list" confirm-text="OK" cancel-text="Cancel" @confirm="confirm"></u-select>
			<!-- <u-button @click="show = true">打开</u-button> -->
		</view>
		<!-- 请假日期 -->
		<view style="margin-left: 40rpx;font-weight: 500;color: #888888;font-size:small;margin-top: 20rpx;">
			<view>Date Range</view>
		</view>
		<view class="center">
			<!-- <uni-datetime-picker
			style="width: 700rpx;"
			v-model="datetimerange"
			type="datetimerange"
			rangeSeparator="to"/> -->
			<u-calendar v-model="showcal" :mode="mode" active-bg-color="#abd270" range-bg-color="rgba(171,210,112,0.13)" range-color="#abd270" @change="change">
				<!-- <view slot="tooltip">
					<view class="title">
					</view>
				</view> -->
			</u-calendar>
			<button style="width: 700rpx; height: 70rpx;border: #f2f2f2 solid 1px; margin-top: 20rpx; background-color: #FFFFFF;color: rgb(96,98,102); font-size: small;" plain="true" @click="showcal = true">
				{{chdate}}
			</button>
		</view>
		<view style="margin-left: 40rpx;font-weight: 500;color: #888888;font-size:small;margin-top: 20rpx;">
			<view>Reason</view>
		</view>
		<view style="width: 700rpx; margin-left: 25rpx; margin-top: 20rpx; background-color: #FFFFFF;">
			<!-- <uni-easyinput type="textarea" placeholder="please input reason" :styles="styles"></uni-easyinput> -->
			<u-field
				v-model="reason"
				label="Please \n Input \n Reason"
				type="textarea"
				style="font-size: smaller;color: rgb(96,98,102);"
			>
			</u-field>
		</view>
		<view style="margin-left: 40rpx;font-weight: 500;color: #888888;font-size:small;margin-top: 20rpx;">
			<view>Picture</view>
		</view>
		<view style="margin-top: 10rpx; margin-left: 25rpx;">
			<u-upload
				
				@afterRead="afterRead"
				@delete="deletePic"
				name="3"
				multiple
				:maxCount="1"
				:previewFullImage="true"
			></u-upload>
		</view>
		<view class="center"><button style="width: 600rpx; margin-top: 50rpx; background-color: #ABC270;color: #ffffff;">Submit</button></view>\
		
		<view style="height: 370rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					value: '1',
					label: 'Sick Leave',
				}, {
					value: '2',
					label: 'Funeral Leave'
				}, {
					value: '3',
					label: 'Parental Leave' 
				},{
					value: '4',
					label: 'Annual Leave' 
				},{
					value: '5',
					label: 'Alternative Leave' 
				}],
				show: false,
				reason:'',
				typeLeave:"",
				leftdays:2,
				datetimerange: ["2021-03-20 00:00:00", "2021-05-10 00:00:00"],
				fileList3: [{
							
				}],
				showcal: true,
				mode: 'range',
				styles:{
					color:'red',
					bordercolor:'green'
				},
				chdate:""
			}
		},
		
		methods:{
			change(e){
				let mm=e.startYear+"-"+e.startMonth+"-"+e.startDay+" to "+e.endYear+"-"+e.endMonth+"-"+e.endDay
				this.chdate=mm
			},
			confirm(e) {
				// console.log(e[0].label);
				this.typeLeave=e[0].label
			},
			//下拉框
			bindPickerChange: function(e) {		//改变的事件名
				//console.log('picker发送选择改变，携带值为', e.target.value)   用于输出改变索引值
				this.index = e.target.value			//将数组改变索引赋给定义的index变量
				this.jg=this.array[this.index]		//将array【改变索引】的值赋给定义的jg变量
			//	console.log("籍贯为：",this.jg)		//输出获取的籍贯值，例如：中国
			},
			click(index) {
				console.log(`click item${index + 1}，content：${this.list[index].text}`)
				this.typeLeave=this.list[index].text
			},
			navigateTo(url) {
			  uni.navigateTo({
				url,
			  });
			},
		}
	}
</script>
<style>
	.all{
		background-color: #f2f2f2;
		background-size: 100% 100%;
	}
	.type{
		width: 700rpx;
		margin-top: 50rpx;
		border: #F2F2F2;
	}
	.center{
		display:flex;
		justify-content:center;
	}
	
</style>
<style scoped>
	/deep/ .u-btn.u-line-1.u-fix-ios-appearance.u-size-default.u-round-circle.u-btn--primary{
		background-color: #ABC270;
	}
</style>
